<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>多图上传</title>
		<link rel="stylesheet" type="text/css" href="webuploader/0.1.5/webuploader.css">
		<script>
			// 图片上传接口
			var upurl = '{$upurl}';
		</script>
	</head>

	<body>
		<div class="wrap-container">
				<form class="layui-form" id="myForm" style="width: 90%;padding-top: 20px;">
					<div class="layui-form-item">
						<label class="layui-form-label">上传大图：</label>
						<div class="layui-input-block">
							<div id="fileList" class="uploader-list"></div>
							<div id="filePicker"></div>
						</div>
						<input type="text" id="thumb1" name="thumb1" class="layui-input">
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">上传封面图：</label>
						<div class="layui-input-block">
							<div id="fileList_thumb" class="uploader-list"></div>
							<div id="filePicker_thumb"></div>
						</div>
						<input type="text" id="thumb2" name="thumb1" class="layui-input">
					</div>
				</form>
		</div>
		<!-- 要引入 jquery -->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="webuploader/0.1.5/webuploader.min.js"></script>
		<script>
		/**
			fileList 缩略图容器
			btnid 上传按钮
			upurl 文件上传接口，表单名称为 file
			label 按钮显示的文字
			input 存储上传后的文件地址
		 */
		function uploadpic(fileList, btnid, upurl, label, input){
			var options = {
				auto: true,
				swf: 'webuploader/0.1.5/Uploader.swf',
				server: upurl,
				pick: {
					id: '#' + btnid,
					innerHTML: label,
					multiple: false
				},
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			}, 
			$list = $('#' + fileList), 
			state = "pending";
			var upload = new WebUploader.create(options);
				upload.on( 'fileQueued', function( file ) {
					var $li = $(
						'<div id="' + file.id + '" class="item">' +
							'<div class="pic-box"><img></div>'+
							'<div class="info">' + file.name + '</div>' +
							'<p class="state">等待上传...</p>'+
						'</div>'
					),
					$img = $li.find('img');
					$list.empty().append( $li );

					// 创建缩略图
					// 如果为非图片文件，可以不用调用此方法。
					upload.makeThumb( file, function( error, src ) {
						if ( error ) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr( 'src', src );
					}, 100, 100 );
				});

				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				upload.on( 'uploadSuccess', function( file , response) {
					$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
					console.log(response);
					$('#' + input).val(response._raw);
				});

		}
		uploadpic('fileList', 'filePicker', upurl, '上传大图', 'thumb1');
		uploadpic('fileList_thumb', 'filePicker_thumb', upurl, '上传封面图', 'thumb2');
		</script>
	</body>
</html>